<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<link rel="stylesheet" type="text/css" href="assets/css/custom1.css"/>
	<link rel="stylesheet" type="text/css" href="assets/css/jquery.bt.css"/>
	<link rel="stylesheet" type="text/css" href="assets/css/popup.css"/>
	<link rel="stylesheet" type="text/css" href="assets/css/tagcloud.css">
		
	<script type="text/javascript" src="assets/js/jquery-1.4.min.js"></script>
	<script type="text/javascript" src="assets/js/tooltip.jquery.js"></script>
	<script type="text/javascript" src="assets/js/jquery.bt.js"></script>
	<script type="text/javascript" src="assets/js/jquery.bt.min.js"></script>
	<script type="text/javascript" src="assets/js/javascript.js"></script>
	<script type="text/javascript" src="assets/js/jquery.simplemodal.js"></script>
	
	<script type="text/javascript">
	sendTagsFive();
		var countTags =0;
			$(function() {
				
				//get tag feed
				$.getJSON("http://localhost:8080/lupita/cloudtag.do?callback=?", function(data) {
					//alert(data);
					$("#tagCloud").html("&nbsp;");
					//alert("tags1"+data);
					countTags = 0;
					//create list for tag links
					$("<ul>").attr("id", "tagList").appendTo("#tagCloud");
					
					
					
					var max;
					//create tags
					$.each(data.tags, function(i, val) {
						if(countTags == 0){
							max = val.freq;
							//alert(max);
							
						}
						countTags++;
						
						//create item
						var li = $("<li>");
						
						//create link
						$("<a>").text(val.tag).attr({title: val.freq , href:"http://localhost:8080/lupita/searcher.do?txtSearchWord=" + val.tag}).appendTo(li);
						
						//set tag size
						li.children().css("fontSize", (150.0*(1.0+(1.5*val.freq-max/2)/max))+"%");   
								//(val.freq / 10 < 1) ? val.freq / 10 + .5 + "em": (val.freq / 10 > 2) ? val.freq/10 +"em" : val.freq / 10 +1+ "em");
						
						
						//add to list
						li.appendTo("#tagList");
						
					});
				});
			});
			
			function sendTags(){

						$.getJSON("http://localhost:8080/lupita/cloudtag.do?callback=?", function(data) {
						$("#tagCloud").html("&nbsp;");
						countTags = 0;
						//create list for tag links
						$("<ul>").attr("id", "tagList").appendTo("#tagCloud");
						var max;
						
						//create tags
						$.each(data.tags, function(i, val) {
							//alert("i"+i);
							//create item
							if(countTags == 0){
								max = val.freq;
								//alert(max);
								
							}
							countTags++;
							var li = $("<li>");
							
							//create link
							$("<a>").text(val.tag).attr({title: val.freq , href:"http://localhost:8080/lupita/searcher.do?txtSearchWord=" + val.tag}).appendTo(li);
							
							//set tag size
							li.children().css("fontSize", (150.0*(1.0+(1.5*val.freq-max/2)/max))+"%");  
									// (val.freq / 10 < 1) ? val.freq / 10 + .5 + "em": (val.freq / 10 > 2) ? val.freq/10 +"em" : val.freq / 10 +1+ "em");
							
							//add to list
							li.appendTo("#tagList");
							
						});
					/*	
					},
					error:function(){
						alert("error");
					}*/
				});
			}


			function sendTagsFive(){
						$.getJSON("http://localhost:8080/lupita/top5responsesvt.do?callback=?", function(data) {

							$("#tagCloudTag5").html("&nbsp;");
						countTags = 0;
						//create list for tag links
						$("<ul>").attr("id", "tagListFive").appendTo("#tagCloudTag5");
						var max;
						
						//create tags
						$.each(data.tags, function(i, val) {
							//alert("i"+i);
							//create item
							if(countTags == 0){
								max = val.freq;
								//alert(max);
								
							}
							countTags++;
							var li = $("<li>");
							
							//create link
							$("<a>").text(val.tag).attr({title: val.freq , href:"http://localhost:8080/lupita/searcher.do?txtSearchWord=" + val.tag}).appendTo(li);
	
							//set tag size
							li.children().css("fontSize", (100.0*(1.0+(1.5*val.freq-max/2)/max))+"%");  
									// (val.freq / 10 < 1) ? val.freq / 10 + .5 + "em": (val.freq / 10 > 2) ? val.freq/10 +"em" : val.freq / 10 +1+ "em");
							
							//add to list
							li.appendTo("#tagListFive");
							
						});

				});
			}

			function sendRecomendation(){
				$.getJSON("http://localhost:8080/lupita/top5responsesvt.do?callback=?", function(data) {

					$("#tagCloudTag5").html("&nbsp;");
				countTags = 0;
				//create list for tag links
				$("<ul>").attr("id", "tagListFive").appendTo("#tagCloudTag5");
				var max;
				
				//create tags
				$.each(data.tags, function(i, val) {
					//alert("i"+i);
					//create item
					if(countTags == 0){
						max = val.freq;
						//alert(max);
						
					}
					countTags++;
					var li = $("<li>");
					
					//create link
					$("<a>").text(val.tag).attr({title: val.freq , href:"http://localhost:8080/lupita/searcher.do?txtSearchWord=" + val.tag}).appendTo(li);

					//set tag size
					li.children().css("fontSize", (100.0*(1.0+(1.5*val.freq-max/2)/max))+"%");  
							// (val.freq / 10 < 1) ? val.freq / 10 + .5 + "em": (val.freq / 10 > 2) ? val.freq/10 +"em" : val.freq / 10 +1+ "em");
					
					//add to list
					li.appendTo("#tagListFive");
					
				});

		});
	}
		</script>
	
<title>Insert title here</title>
</head>
<body>

<table width="90%" align="center" cellspacing="10">
  <tr>
    <td colspan="2">
    	<div style="margin-left: 15px" > <img src="assets/images/collectiveI.jpg" height="100">  <div id="nav" class="round"> 
        <ul>
           <li><a href = "indexer1.do">Indizar</a></li> 
           	<li><a href = "recomendation.do">Recomendar</a></li>                               
           <li><a href = "entrar.do">inicio</a></li>           
        </ul>
         </div>
         </div>       
    </td>    
  </tr>
  <tr>
  	<td valign="top">
  		<div id="search-tabs" >
  			<h1>Nuve de tags</h1>  			
  			<div id="tagCloud">			
			</div>
			
  			<h1>Top5</h1>
  				<div id="tagCloudTag5">			
				</div>
  			
  		</div>
  	</td>
  	<td align="center" valign="top">
	  	<div id="section" class="round">
	  	
	  	<% boolean isIndizado = (Boolean) request.getAttribute("isIndizado"); 
           		if(isIndizado){%>
           		 <div style="margin-top: 10px;">
           			Numero de archivos indizados: <%= request.getAttribute("numIndexed") %> en <%= request.getAttribute("seconds") %> segundos.
           		<div>
           		<%} %>
	  	<br/>
	  	<div style="border:solid blue 0px;clear:both;width:450px;height:30px;">
		  	  <form id="frmSearch" method="post" action="searcher.do">
		  	  	<div style="border:solid red 0px;width:300px;float:left;">
		  	  	 <c:choose>
		  	  	 	<c:when test="${searchedQuery != ''}">
		  	  	 		<input type="text" id="txtSearchWord" name="txtSearchWord" value="${searchedQuery}"/>
		  	  	 	</c:when>
		  	  	 	<c:otherwise>
		  	  	 		<input type="text" id="txtSearchWord" name="txtSearchWord" value=""/>	
		  	  	 	</c:otherwise>		  	  	 
		  	  	 </c:choose>		  	  							
					<input id="btnDoSearch" type="submit" value="Buscar"  />					
				</div>	
				<div style="border:solid red 0px; width:70px;float:left;margin-top: 5px;">
					<div type="text" id="example14" class="target" style="color:#0099CC;">Avanzada</div>
					<div id="example-14-content" style="display:none;"></div>
				</div>
				<div style="display:none;">
					<input id="ckbFLVH" type="checkbox" name="search-filters" value=".*[fF][lL][vV]" ${ckbFLVStatus} />											
					<input id="ckbMP3H" type="checkbox" name="search-filters" value=".*[mM][pP][3]" ${ckbMP3Status} />
					<input id="ckbWordH" type="checkbox" name="search-filters" value=".*[dD][oO][cC]|.*[dD][oO][cC][xX]" ${ckbWordStatus} />
					<input id="ckbExcelH" type="checkbox" name="search-filters" value=".*[xX][lL][sS]" ${ckbExcelStatus} />
					<input id="ckbPPTH" type="checkbox" name="search-filters" value=".*[pP][pP][tT]" ${ckbPPTStatus} />
					<input id="ckbTXTH" type="checkbox" name="search-filters" value=".*[tT][xX][tT]" ${ckbTXTStatus} />
					<input id="ckbHTMLH" type="checkbox" name="search-filters" value=".*[hH][tT][mM][lL]" ${ckbHTMLStatus} />
					<input id="ckbPDFH" type="checkbox" name="search-filters" value=".*[pP][dD][fF]" ${ckbPDFStatus} />
				</div>
			</form>
		</div>
		<br/>
		
		<div id="search-result">
								<c:if test="${listFileRepoSize != null && listFileRepoSize != 0 }">
									<span id="files-found">Archivos econtrados ${listFileRepoSize} en ${searchTime} segundos</span>
									<script>
										sendTags();
									</script>
								</c:if>
								<div id="search-result-list">									
										<c:choose>
											<c:when test="${listFileRepoSize != null && listFileRepoSize != 0 }">
												
												<div id="result-list">  
													<c:forEach var="fileRepo" items="${listFileRepo}" varStatus="listStatus">
														<c:if test="${(listStatus.index % 3) == 0 }">
													 		<c:set var="counter" value="0"/>
													 		<div id="result-list-row<c:out value="${counter}"></c:out>">
													 	</c:if> 
													 	<div id="result-list-cell">
															<div class="result-item">
																<c:choose>
																	<c:when test="${fileRepo.fileExtension == 'flv'}">
																		<img src="assets/icons/flv-icon-48x48.png"title="Video FLV">
																	</c:when>
																	<c:when test="${fileRepo.fileExtension == 'mp3'}">
																		<img src="assets/icons/MP3-icon-48x48.png" title="Audio MP3">
																	</c:when>
																	<c:when test="${fileRepo.fileExtension == 'doc' || fileRepo.fileExtension == 'docx'}">
																		<img src="assets/icons/Word-icon-48x48.png" title="Documento de word">
																	</c:when>
																	<c:when test="${fileRepo.fileExtension == 'xls'}">
																		<img src="assets/icons/Excel-icon-48x48.png" title="Documento de Excel">
																	</c:when>
																	<c:when test="${fileRepo.fileExtension == 'ppt'}">
																		<img src="assets/icons/PowerPoint-icon-48x48.png" title="Documento de PowerPoint">
																	</c:when>
																	<c:when test="${fileRepo.fileExtension == 'pptx'}">
																		<img src="assets/icons/PowerPoint-icon-48x48.png" title="Documento de PowerPoint">
																	</c:when>
																	<c:when test="${fileRepo.fileExtension == 'txt'}">
																		<img src="assets/icons/txt-icon-48x48.png" title="Archivo txt">
																	</c:when>
																	<c:when test="${fileRepo.fileExtension == 'html'}">
																		<img src="assets/icons/html-icon-48x48.png" title="Archivo HTML">
																	</c:when>
																	<c:when test="${fileRepo.fileExtension == 'pdf'}">
																		<img src="assets/icons/Pdf-icon-48x48.png" title="Archivo PDF">
																	</c:when>
																	<c:otherwise>
																		<img src="assets/icons/file-icon-48x48.png" title="Archivo">
																	</c:otherwise>
																</c:choose> 
																<br />
																<span><i>${fileRepo.shortFileName}</i> 
																<br>
																<fmt:formatNumber value="${fileRepo.fileLength}" pattern="#0.00 KB" />
																<!--  a id="fancy-result-${listStatus.index}" href="fancyboxdisplay.do?fileindex=${listStatus.index}">Ver</a-->
																<a id="viewDetails" href="#" onclick="fnSendPopupView('${listStatus.index}');fnSendTop5('${listStatus.index}');" >Ver</a> 
																
																
																</span>
															</div>
														</div>
														<c:set var="counter" value="${counter+1}"/>
														<c:if test="${counter == 3 }">
															</div>
														</c:if>
													
												</c:forEach>
												<c:if test="${counter != 3 }">
													</div>
												</c:if>
												
												</div>
											</c:when>
										  <c:otherwise>
										  	<c:choose>
		  	  	 								<c:when test="${searchedQuery == '' || searchedQuery == null}">
		  	  	 						
		  	  	 								</c:when>
		  	  	 								<c:otherwise>
		  	  	 											<div  style="font-size: 16px;color: red">  
										  						No se econtraron resultados
										  					</div>	
		  	  	 								</c:otherwise>		  	  	 
		  	  	 								</c:choose>
										  		
										  		
										  </c:otherwise>
										</c:choose>					
								</div>
						</div>
  		</div>
  	</td>
  </tr>
</table>

<script type="text/javascript">

var varCkbFLV = false;
var varCkbMP3 = false;
var varCkbWord = false;
var varCkbExcel = false;
var varCkbPPT = false;
var varCkbTXT = false;
var varCkbHTML = false;
var varCkbPDF = false;


fnGet("ckbFLVH").checked = false;											
fnGet("ckbMP3H").checked = false;
fnGet("ckbWordH").checked = false;
fnGet("ckbExcelH").checked = false;
fnGet("ckbPPTH").checked = false;
fnGet("ckbTXTH").checked = false;
fnGet("ckbHTMLH").checked = false;
fnGet("ckbPDFH").checked = false;

function fnGet(target){
	return document.getElementById(target);
}

function setVal(target){
	if(fnGet(target+"H").checked){
		fnGet(target+"H").checked = false;
	}else{
		fnGet(target+"H").checked = true;
	}
}



function getHTML(){
	var str = "";
		
		str += '<h3>';
		/*str += '<img src="icons/thumbs/documents.png" width="24" height="24" />';*/
		str += 'Documentos';
		str += '</h3>';
		str += '<div id="doc-opt" class="margin-in-menu">';
		if(varCkbWord){
			str += '<input id="ckbWord" type="checkbox" onclick="varCkbWord = false;setVal(this.id);"  checked="checked" /> Word <br/>';
		}else{
			str += '<input id="ckbWord" type="checkbox" onclick="varCkbWord = true;setVal(this.id);"  /> Word <br/>';
		}
		if(varCkbExcel){
			str += '<input id="ckbExcel" type="checkbox" onclick="varCkbExcel = false;setVal(this.id);"  checked="checked"/> Excel <br/>';
		}else{
			str += '<input id="ckbExcel" type="checkbox" onclick="varCkbExcel = true;setVal(this.id);" /> Excel <br/>';
		}
		if(varCkbPPT){
			str += '<input id="ckbPPT" type="checkbox" onclick="varCkbPPT = false;setVal(this.id);" checked="checked"/> PowerPoint <br/>';
		}else{
			str += '<input id="ckbPPT" type="checkbox" onclick="varCkbPPT = true;setVal(this.id);" /> PowerPoint <br/>';
		}
		if(varCkbTXT){
			str += '<input id="ckbTXT" type="checkbox" onclick="varCkbTXT = false;setVal(this.id);"  checked="checked"/> TXT <br/>';
		}else{
			str += '<input id="ckbTXT" type="checkbox" onclick="varCkbTXT = true;setVal(this.id);" /> TXT <br/>';
		}
		if(varCkbHTML){
			str += '<input id="ckbHTML" type="checkbox" onclick="varCkbHTML = false;setVal(this.id);"  checked="checked"/> HTML <br/>';
		}else{
			str += '<input id="ckbHTML" type="checkbox" onclick="varCkbHTML = true;setVal(this.id);" /> HTML <br/>';
		}
		if(varCkbPDF){
			str += '<input id="ckbPDF" type="checkbox" onclick="varCkbPDF = false;setVal(this.id);"  checked="checked" /> PDF';
		}else{
			str += '<input id="ckbPDF" type="checkbox" onclick="varCkbPDF = true;setVal(this.id);" /> PDF';
		}
		str += '</div>';
		str += '<h3>';
		str += 'Archivos Media';
		str += '</h3>';
		str += '<div id="media-opt" class="margin-in-menu">';
		if(varCkbFLV){
			str += '<input id="ckbFLV" type="checkbox" onclick="varCkbFLV = false;setVal(this.id);"  checked="checked"/> Videos FLV <br/>';
		}else{
			str += '<input id="ckbFLV" type="checkbox" onclick="varCkbFLV = true;setVal(this.id);"   /> Videos FLV <br/>';
		}
		if(varCkbMP3){										
			str += '<input id="ckbMP3" type="checkbox" onclick="varCkbMP3 = false;setVal(this.id);"  checked="checked"/> Audio MP3';
		}else{
			str += '<input id="ckbMP3" type="checkbox" onclick="varCkbMP3 = true;setVal(this.id);"  /> Audio MP3';
		}
		str += '</div>';	
	
	return str;
}

$('#example-14-content').hide();

$('#example14').bt({
  trigger: 'click',
  contentSelector: "getHTML();", /*get text of inner content of hidden div*/
  width: 180,
  fill: '#0099CC',
  strokeWidth: 0, /*no stroke*/
  spikeLength: 40,
  spikeGirth: 10,
  padding: 20,
  cornerRadius: 15,
  cssStyles: {
    fontFamily: '"lucida grande",tahoma,verdana,arial,sans-serif', 
    fontSize: '13px'
  }
});

$('.simplemodal-close').click(function() {
	$("#tagCloudTag5").html("&nbsp;");
	sendTagsFive();
});
</script>
<div style="display: none; padding: 10px;" id="details_popup">
    <div id="titlePopupUser" class="list_group_title"></div>
    <div id="details_popup_content">&nbsp;</div>
</div>
</body>
</html>